import React from "react";
import { Collapse, Tabs, Image  } from "antd";
const { Panel } = Collapse;
const { TabPane } = Tabs;
const strArr=[
    "这个图片来自于企微活码权限处理，对后端给到数据中的operationIds生成权限列表data.permissions，分发使用,如需查看源代码，请进入swc-global-src-models-common.ts查看",
    "企微项目中涉及分组权限相关由我修改，路径：contact-manage-src-common-Group-index.tsx 分组弹框的各个按钮由参数控制。"
]
function qrCodePermissionsFn():Record<string, any> {
    const permissionsConf: Record<number, string> = {
        4800: 'QRCODE_VIEW',
        4801: 'QRCODE_CREATE',
        4802: 'QRCODE_EDIT',
        4803: 'QRCODE_DELETE',
        4804: 'QRCODE_GROUP_CREATE',
        4805: 'QRCODE_GROUP_DELETE',
        4806: 'QRCODE_GROUP_EDIT',
        4807: 'QRCODE_INDICATOR_VIEW',
        4808: 'QRCODE_USERGROUP_SAVE',
        4809: 'QRCODE_MERGE_ANALYSE',
        4810: 'QRCODE_DOWNLOAD',
        4811: 'QRCODE_EXPORT',
        4812: 'QRCODE_IMPORT',
    };
    let useinfo={
        avatarUrl: "http://wework.qpic.cn/bizmail/1vzqfpSVbssu2XUARCmlFKe8dxpqSzouBZLgnrVMnmUZghFRCwC6lQ/0",
        close: false,
        corpName: "测试活码应用",
        operationIds: [4800,4801],
        userid: "h",
        username: "测试活码应用",
    }
    function formatePermissions(
        permissionsSource: number[]
      ): Record<string, boolean> {
        return Object.keys(permissionsConf).reduce(
          (acc: Record<string, boolean>, permission) => {
            const operationId = Number(permission);
            const operationName = permissionsConf[operationId];
            if (permissionsSource.indexOf(operationId) > -1) {
              acc[operationName] = false;
            } else {
              acc[operationName] = true;
            }
            return acc;
          },
          {}
        );
    }
    let data=useinfo?{
        ...useinfo,
        enabled: useinfo && !useinfo.close,
        permissions: formatePermissions(
            useinfo.operationIds || []
        ),
    }:{}
    console.log(data);
    return data
}

export default class CollapseCom extends React.Component {
  render() {
    return (
      <div>
        <Tabs defaultActiveKey="1" >
            <TabPane tab="Tab 1" key="1">
                <Collapse accordion defaultActiveKey={['1']}>
                    <Panel header="转换函数理解" key="1">
                        <p>{strArr[0]}</p>
                        <p>{strArr[1]}</p>
                        <Image
                            width={150}
                            src={qrCodePermissionsFn().avatarUrl}
                        />
                    </Panel>
                    <Panel header="This is panel header 2" key="2">
                        <p>1</p>
                    </Panel>
                    <Panel header="This is panel header 3" key="3">
                        <p>2</p>
                    </Panel>
                </Collapse>
            </TabPane>
            <TabPane tab="Tab 2" key="2">
                Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
                Content of Tab Pane 3
            </TabPane>
        </Tabs>
     
      </div>
    );
  }
}
